<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        background-image:url(1/a14c2d761de75b8701e920ed20750daf.jpg);
            /* background: url(images/OIP-C.jpg) no-repeat 0px 0px; */
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(246, 250, 250, 0.6);
            box-shadow: 7px 7px 17px rgba(246, 250, 250, 0.4);
            border-radius: 300px;
        }
         
        #loginDiv:hover{  
           filter: grayscale(60%);
        }  
 
        input{
            text-align: center;
            border:none; 
            background-color: rgba(239, 248, 250, 0.1);
            border-bottom:1px solid rgb(80, 196, 241);
            width: 200px;
            
        }
 
        #L_login {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
 
        #L_register {
            border-color: cornsilk;
            background-color: rgba(59, 194, 248, 0.8);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
</head>
 
<body>
    <div id="loginDiv">
        <form action="" id="form">
            <table>
                <h2 style="text-align: center; color: rgb(59, 194, 248);">立即登录</h2></br>
                <tr><td style="text-align: center; color: gray;">邮箱</td></tr>
                <tr><td><input class="line" type="text" id="L_email"></td></tr>
                <tr><td style="text-align: center; color: gray;">密码</td></tr>
                <tr><td > <input class="line" type="password" placeholder="密码长度至少为6位" id="L_pwd"></td></tr>
           </table>
        </br>
        <!-- <p style="text-align: center;color: rgb(59, 194, 248);"><a href="#">忘记密码?</a></p> -->
        <div style="text-align: center;margin-top: 15px;">
            <input type="button" id="L_login" value="登录" onclick=javascrtpt:jump1()>
            <input type="button" id="L_register" value="注册" onclick=javascrtpt:jump2()>
        </div>
        </form>
    </div>
    <script>
        L_email.onchange = function(){
		var L_email = this.value;
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
		if(!reg.test(L_email)){
			alert("邮箱格式不正确，请重新输入！");
            return false;  
		}
	    }
        L_pwd.onchange = function(){
		var L_pwd = this.value;
		var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
		if(!reg.test(L_pwd)){
            alert("密码长度要大于6位，由数字和字母组成,请重新输入！");
            return false;  
		}
	    }
 
        var email=localStorage.getItem("email");
        var password=localStorage.getItem("password");
        console.log("email:"+email);
        console.log("pwd:"+password);
 
        function jump1(){
            console.log(document.getElementById("L_email").value);
            console.log(+document.getElementById("L_pwd").value);
 
            var Email = document.getElementById("L_email");  
            var Password = document.getElementById("L_pwd");
 
            if(email==document.getElementById("L_email").value && password==document.getElementById("L_pwd").value){
               alert("登录成功，点击确定进入贪吃蛇游戏！");
            //    window.location.href="My_Album.html";
            }
            else if(Email.value == "" || Password.value =="") {            
                    alert("邮箱或密码不能为空！");            
                    return false;            
                }   
            else{
               alert("邮箱或密码错误！");
               return false;  
           }
        }
        function jump2(){
           window.location.href="regist.html";
        }
    </script>
</body>
</html>